<template>
  <div id="maintopLeftBottom" class="clearfix" v-if>
    <div>
      <p>当前患者：</p>
      <span class="userName pull-left">{{patientName}}</span>
      <img src="../../../../static/images/male.png" alt width="15" v-show="patientSex == '男'" />
      <img src="../../../../static/images/female.png" alt width="15" v-show="patientSex == '女'" />
    </div>
    <div
      :class="{'smallLeft': patientCondition.length > 12}"
      v-if="!$store.getters.stateData.isShowBottom"
    >
      年龄：
      <span>{{patientAge}}</span>
    </div>
    <div :class="{'smallLeft': patientCondition.length > 12}">
      住院号：
      <span>{{patientIdPat}}</span>
    </div>
    <div :class="{'smallLeft': patientCondition.length > 12}">
      床号：
      <span>{{patientBedName}}</span>
    </div>
    <div :class="{'smallLeft': patientCondition.length > 12}">
      病情：
      <span>{{patientCondition}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    //console.log(this.$store.getters.stateData.isShowBottom)
  },
  computed: {
    patientName: function() {
      return this.$store.getters.patientName;
    },
    patientSex: function() {
      return this.$store.getters.patientSex;
    },
    patientCondition: function() {
      return this.$store.getters.patientCondition;
    },
    patientBedName: function() {
      return this.$store.getters.stateData.BedName;
    },
    patientIdPat: function() {
      return this.$store.getters.stateData.ID_PAT_IN;
    },
    patientAge: function() {
      return this.$store.getters.stateData.Age;
    }
  }
};
</script>
<style scoped>
#maintopLeftBottom {
  position: absolute;
  bottom: 0;
  height: 31px;
  left: 9%;
  display: flex;
  align-items: center;
  width: 91%;
}
#maintopLeftBottom div:first-child {
  display: flex;
  align-items: center;
  margin-left: 0;
}
#maintopLeftBottom p {
  line-height: 32px;
  border-bottom: 2px solid #11a7f3;
}
#maintopLeftBottom .userName {
  margin-left: 5px;
}
#maintopLeftBottom img {
  margin-left: 10px;
}

#maintopLeftBottom div {
  margin-left: 35px;
}
@media screen and (max-width: 768px){
  #maintopLeftBottom{
    left: 0;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 15px;
    height: auto;
    position: initial;
    background-color: #F7F7F7;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #maintopLeftBottom p{
    border-bottom: none;
  }
  #maintopLeftBottom div{
    margin-left: 0;
    margin-right: 0;
    width: 50%;
    height: 28px;
    line-height: 28px;
  }
  #maintopLeftBottom div:last-child{
    width: 100%;
  }
}
@media screen and (max-width: 576px){
  #maintopLeftBottom div{
    width: 100%;
  }
}
</style>
